useGetSwapRoutes

Hook for fetching available routes for a swap

Import

import { useGetSwapRoutes } from '@0xsequence/hooks'

This hook replaces the useGetSwapPrices hook which was removed in v5.2.3.

Usage

import { useGetSwapRoutes } from '@0xsequence/hooks'
import { useState } from 'react'

function SwapList() {
    const [selectedCurrency, setSelectedCurrency] = useState('')

    const toTokenAddress = '0x...'
    const toTokenAmount = '1000000000'
    const walletAddress = '0x...'
    const chainId = 137

    const {
        data: swapRoutes = [],
        isLoading,
        isError
    } = useGetSwapRoutes({
        walletAddress,
        toTokenAddress,
        toTokenAmount,
        chainId
    })

    if (isLoading) return <div>Loading swap options...</div>

    if (isError) return <div>Error loading swap options</div>

    const noOptionsFound = swapRoutes.flatMap(route => route.fromTokens).length === 0

    if (noOptionsFound) return <div>No swap options found</div>

    return (
        <div>
            {swapRoutes.flatMap(route => route.fromTokens).map(token => (
                <div
                    key={token.address}
                    onClick={() => setSelectedCurrency(token.address)}
                    style={{
                        border: selectedCurrency === token.address ? '2px solid blue' : '1px solid gray',
                        padding: '10px',
                        margin: '5px',
                        cursor: 'pointer'
                    }}
                >
                    <img src={token.logoUri} alt={token.symbol} width="24" height="24" />
                    <span>{token.symbol}: {token.name}</span>
                    <div>Required: {token.price}</div>
                </div>
            ))}
        </div>
    )
}

export default SwapList

Return Type: UseQueryResult<LifiSwapRoute[]>

The hook returns all properties from React Query’s UseQueryResult with swap routes data. Here’s the detailed structure of the LifiSwapRoute object:

interface LifiToken {
    chainId: number;
    address: string;
    symbol: string;
    name: string;
    decimals: number;
    priceUsd: number;
    price?: string;
    coinKey: string;
    logoUri: string;
}

interface LifiSwapRoute {
    fromChainId: number;
    toChainId: number;
    fromTokens: Array<LifiToken>;
    toTokens: Array<LifiToken>;
}

Properties

data

LifiSwapRoute[] | undefined

Array of swap route objects containing:

route

• fromChainId: The chain ID of the token to sell
• toChainId: The chain ID of the token to buy
• fromTokens: Array of tokens that can be used to pay for the swap
• toTokens: Array of tokens that can be received from the swap

isLoading

boolean

Loading state for the data fetch.

isError

boolean

Error state indicating if the query failed.

error

Error | null

Any error that occurred during data fetching.

Parameters

The hook accepts two parameters:

args: UseGetSwapRoutesArgs

interface UseGetSwapRoutesArgs {
  walletAddress: string
  toTokenAddress: string
  chainId: number
  toTokenAmount: string
}

Parameter	Type	Description
walletAddress	string	The address of the user’s wallet
toTokenAddress	string	The address of the token to buy
chainId	number	The chain ID where the swap will occur
toTokenAmount	string	The amount of token to buy (in wei)

options: HooksOptions

interface HooksOptions {
  disabled?: boolean
  retry?: boolean
}

Parameter	Type	Description
disabled	boolean	(Optional) Disable the query from automatically running
retry	boolean	(Optional) Whether to retry failed queries (defaults to true)

Additional Notes

• This hook uses React Query to fetch and cache swap routes from the Sequence API.
• Stale time is set to one hour by default to avoid refreshing quotes while the user is completing transactions.
• This hook will not return “fromTokens” that the user does not have in their wallet.